<template>
    <!--楼层-->
    <div class="floor">
        <div class="container mt-40">
            <div class="left">
                <div class="text">
                    <p class="top">动态展示</p>
                    <p class="trans">Dynamic display</p>
                    <el-button round class="btn">查看更多>></el-button>
                </div>
            </div>
            <div class="right">
                <div class="detail" v-for="i in 3">
                    <el-card class="box-card" body-style="padding:10px" >
                        <img src="@/assets/images/build.png" alt="">
                        <p class="top">协会成功组织会员单位开展某某活动</p>
                        <p class="describe">文字描述内容文字描述内容文字描述内容文字描述内容文字描述内容文字描述内容文字描述文字描述内容文字描述内容文字描述内容文字描述内容文字描述内容文字描述内容文字描述内容文字描述文字描述内容</p>
                        <p class="date">2023-07-15</p>
                    </el-card>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped lang="less">
@import "@/assets/style/common.less";
.floor{
    .container{
        height: 380px;
        .left{
            background-image: url(@/assets/images/bg1.png);
            width: 264px;
            float: left;
            height:380px ;
            text-align: center;
            .text{
                padding: 40px 0;
                position: relative;
                .top{
                    font-size: 30px;
                    color: #FFFFFF;
                    line-height: 40px;
                }
                .trans{
                    font-size: 14px;
                    color: #FFFFFF;
                    line-height: 30px;
                }
                .btn{
                    font-size: 16px;
                    color: #009CF2;
                    line-height: 40px;
                    position: absolute;
                    left: 62px;
                    top: 300px;
                    width:140px ;
                    height: 40px;
                }
            }

        }
        .right{
            float: right;
            .detail{
                + div{
                    padding-top:10px ;
                }
                .box-card {
                    width: 912px;
                    height: 120px;
                    img{
                        width: 150px;
                        height:100px;
                        float: left;
                        padding-right:20px ;
                    }
                    .top{
                        font-size: 18px;
                        color: #222222;
                        line-height: 40px;
                        font-weight: bold;
                    }
                    .describe{
                        font-size: 14px;
                        color: #666666;
                        line-height: 24px;
                        white-space:nowrap;
                        overflow:hidden;
                        text-overflow: ellipsis;

                    }
                    .date{
                        font-size: 14px;
                        color: #999999;
                        line-height: 40px;
                    }

                }
            }
        }
    }
}
</style>
